<template>
    <div class="table">
        <el-table :data="tableData" :empty-text="BaseConfig.emptyText" cell-class-name="pp" header-cell-class-name="pp">
            <el-table-column label="#" type="index"/>
            <el-table-column label="物资名称" prop="goodsName"/>
            <el-table-column label="物资图片">
                <template #default="scope">
                    <el-avatar :size="50" :src="`/api/images/${scope.row.picture}`"/>
                </template>
            </el-table-column>
            <el-table-column label="申请数量" prop="claimNumber"/>
            <el-table-column label="库存" prop="number">
                <template #default="scope">
                    <el-text v-if="scope.row.number >= 50">{{ scope.row.number }}</el-text>
                    <el-text v-else type="danger">{{ scope.row.number }}</el-text>
                </template>
            </el-table-column>
            <el-table-column label="申请人">
                <template #default="scope">
                    <el-text v-if="scope.row.username">{{ scope.row.username }}</el-text>
                    <el-text v-else>{{ scope.row.uname }}</el-text>
                </template>
            </el-table-column>
            <el-table-column label="需求人" prop="uname"/>
            <el-table-column label="处理状态">
                <template #default="scope">
                    <el-tag v-if="scope.row.status === '同意'">{{ scope.row.status }}</el-tag>
                    <el-tag v-else-if="scope.row.status === '拒绝'" type="info">{{ scope.row.status }}</el-tag>
                    <el-tag v-else type="warning">{{ scope.row.status }}</el-tag>
                </template>
            </el-table-column>
            <el-table-column fixed="right" label="操作">
                <template #default="scope">
                    <el-button link type="primary" @click="detailClaim(scope.row)">
                        处理申领
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
    <div class="page">
        <el-pagination
                v-model:current-page="currentPage"
                v-model:page-size="pageSize"
                :total="ctotal"
                hide-on-single-page
                layout="total, prev, pager, next"
                @current-change="handleCurrentChange"
        />
    </div>
</template>

<script lang='ts' setup>
import { onBeforeMount, onUnmounted, ref } from 'vue'
import { BaseConfig } from '@/config/config'
import ClaimService from '@/api/claimApi'
import { ClaimDto, DealClaim } from '@/ts/type/Claim'
import { EventBus } from '@/utils/mitt'

const form = ref<DealClaim>({})
const searchBool = ref<boolean>(false)
const tableData = ref<ClaimDto[]>([])
const currentPage = ref<number>(1)
const pageSize = ref<number>(8)
const ctotal = ref<number>(0)
// 获取用户列表数据
const getAllInfo = () => {
  ClaimService.getAllInfo(currentPage.value, pageSize.value).then(res => {
    const { total, list } = res.data
    tableData.value = list
    ctotal.value = total
  })
}

// 详情
const detailClaim = (row: ClaimDto) => {
  EventBus.emit('claimDrawer', { bool: true, ClaimDtoVal: row })
}
const handleCurrentChange = (val: number) => {
  console.log(searchBool.value)
  currentPage.value = val
  if (!searchBool.value) return getAllInfo()
  query()
}

// 监听up组件的数据
EventBus.on('searchClaim', res => {
  const { bool, dealClaimVal } = res
  if (!bool) {
    searchBool.value = bool
    return getAllInfo()
  }
  searchBool.value = bool
  form.value = dealClaimVal as DealClaim
  query()
})

// 模糊查询
const query = () => {
  ClaimService.queryByStatus(currentPage.value, pageSize.value, form.value).then(res => {
    const { total, list } = res.data
    tableData.value = list
    ctotal.value = total
  })
}

// 页面加载数据时进行数据获取
onBeforeMount(() => {
  getAllInfo()
})
onUnmounted(() => {
  EventBus.off('claimDrawer')
})
</script>

<style lang='scss' scoped>
:deep(.pp ) {
  text-align: center;
}

.page {
  margin: 15px auto 0;
}
</style>